<template>
    <div>
      <!--el-dialog  
      visible	是否显示 Dialog，支持 .sync 修饰符
      before-close	关闭前的回调，会暂停 Dialog 的关闭	function(done)，done 用于关闭 Dialog
      center	是否对头部和底部采用居中布局	
      -->
      <el-dialog
        :title="isAdd ? '添加菜单' : '编辑菜单'"
        :visible.sync="isShow"
        :before-close="cancel"
        center
      >
        <el-form :model="menuInfo" :rules="rules" ref="menuRef">
          <el-form-item
            prop="title"
            label="菜单名称"
            :label-width="formLabelWidth"
          >
            <el-input v-model="menuInfo.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="pid" label="上级菜单" :label-width="formLabelWidth">
            <el-select v-model="menuInfo.pid" placeholder="请选择">
              <el-option :value="0" label="顶级菜单"></el-option>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单类型" :label-width="formLabelWidth">
            <el-radio v-model="menuInfo.type" :label="1">目录</el-radio>
            <el-radio v-model="menuInfo.type" :label="2">菜单</el-radio>
          </el-form-item>
          <el-form-item label="菜单图标" :label-width="formLabelWidth">
            <el-input autocomplete="off" v-model="menuInfo.icon"></el-input>
          </el-form-item>
          <el-form-item label="菜单地址" :label-width="formLabelWidth">
            <el-input autocomplete="off" v-model="menuInfo.url"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-switch
              v-model="menuInfo.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="2"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button @click="confirm" type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  //引入封装好的接口
  import {addMenu} from '../../request/api'
  export default {
    props: ["isShow", "isAdd"],
    data() {
      return {
        formLabelWidth: "120px",
        //表单对象数据
        menuInfo: {
          pid: 0, //上级分类编号  注意：顶级菜单-0number
          title: "", //菜单名称string
          icon: "", //图标string
          type: 1, //类型 1目录2菜单number
          url: "", //菜单地址string
          status: 1, //状态   1正常2禁用   number类型number
        },
        //设置规则验证对象
        rules: {
          title: [
            { required: true, message: "请输入菜单名称", trigger: "blur" },
            { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
          ],
          pid: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
        },
        options: [
          {
            value: 1,
            label: "系统管理",
          },
          {
            value: 2,
            label: "商城管理",
          },
        ],
      };
    },
    methods: {
      //封装一个取消事件
      cancel() {
        this.$emit("cancel", false);
      },
      //封装一个确认事件
      confirm() {
        this.$refs.menuRef.validate((val) => {
          if (val) {
          //   console.log(this.menuInfo);
          //调用添加接口
          addMenu(this.menuInfo)
          .then(res=>{
              // console.log(res,'响应')
              if(res.code==200){
                  this.$message.success(res.msg)
                  this.cancel()
              }else{
                  this.$message.error(res.msg)
              }
          })
          }
        });
      },
    },
  };
  </script>
  
  <style scoped></style>
  